<template>
  <view class="appUpdate" >
    <scroll-view scroll-y class="content">
      <view class="text-center icon" style="margin-bottom: 100upx;"><cu-icon name="pullup" size="200upx" color="#FFFFFF"></cu-icon></view>
      <view class="title text-white">更新说明</view>
      <view class="desc">
        <view class="text-content text-white" v-for="(item,index) in info.description" :key="index">{{ item }}</view>
      </view>
    </scroll-view>

    <view class="update-btn">
      <button type="button" v-if="status === 0" class="cu-btn bg-green block">
        <cu-icon name="loading"></cu-icon>
        正在检查更新...
      </button>
      <button type="button" v-if="status === 1" @tap="onClickDownload" class="cu-btn bg-green text-white block">下载更新</button>

      <view v-if="status === 2" class="updateProgress">
        <view class="updateProgressContainer">
          <text class="updateProgressText" :style="'width:' + progress + '%'" v-if="progress > 25">已下载 {{ progress }}%</text>
        </view>
      </view>

      <button type="button" v-if="status === 3" @tap="onClickInstallUpdate" class="cu-btn bg-green text-white block">安装更新</button>
    </view>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
import cuIcon from "@/components/cuIcon";
import updater from "@/utils/uni-updater";
import uniApp from "@/utils/uni-app";
export default {
  components: {
    cuIcon
  },
  computed: {
    IMAGES: () => IMAGES
  },
  data() {
    return {
      status: 0, // 0 正在检查更新 1 检查完成 2 下载中  3 下载完成
      progress: 0, // 进度条
      info: null, // 更新信息
      filePath: "" // 安装包保存位置
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.status = 0;
      uni.showLoading({ title: "正在检查更新..." });
      return updater
        .checkUpdate()
        .then(_ => {
          this.status = 1;
          uni.hideLoading();
          if (_) {
            console.warn(_);
            this.info = _;
          } else {
            uniApp.alert("暂无更新");
          }
          return _;
        })
        .catch(e => {
          uni.hideLoading();
          uniApp.alert(e.message);
        });
    },
    onClickDownload() {
      //关闭下拉刷新功能
      uniApp.pullDownRefresh().close();
      this.status = 2;
      updater
        .downloadFile(this.info.hot ? this.info.wgt_url : this.info.pkg_url, pg => {
          this.progress = pg.progress;
        })
        .then(_ => {
          this.status = 3;
          this.filePath = _.tempFilePath;
          console.warn("下载完成", _);
        });
    },
    onClickInstallUpdate() {
      plus.nativeUI.showWaiting("安装更新中...");
      plus.runtime.install(
        this.filePath,
        {
          force: false
        },
        widgetInfo => {
          plus.nativeUI.closeWaiting();
          uniApp.alert("更新成功,点击重启应用", () => {
            plus.runtime.restart();
          });
        },
        error => {
          plus.nativeUI.closeWaiting();
          plus.nativeUI.alert("更新失败[" + error.code + "]：" + error.message);
        }
      );
    }
  },
  onPullDownRefresh() {
    this.init().then(_ => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>
<style scoped lang="scss">
.appUpdate {
  height: 100%;
  width: 100%;
  @include navBg();
  overflow: hidden;
  padding-top: 100upx;
  margin: 0 auto;
  position: relative;
  scroll-view.content {
    width: 90%;
    margin: 0 auto;
    height: calc(100% - 180upx);
    .title {
      font-weight: bold;
      font-size: 36upx;
    }
    .desc{
      width: 100%;
    }

    .text-content {
      margin: 30upx auto;
    }
  }

  .update-btn {
    width: 100%;
    height: 60upx;
    text-align: center;
    button,
    .cu-progress {
      width: 80%;
      margin: 0 auto;
      height: 60upx;
      text-align: center;
    }
  }
}
.updateProgress{
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.updateProgressContainer{
  border: 1rpx solid #fa8fc6;
  border-radius: 10rpx;
  width: 640rpx;
  text-align: left;
  height: 60rpx;
  overflow: hidden;
}
.updateProgressText{
  background-color: #fa8fc6;
  color: #FFFFFF;
  margin: 0 auto;
  font-size: 24rpx;
  line-height: 60rpx;
  height: 60rpx;
  display: inline-block;
  text-align: center;
}
</style>
